<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/luara.left.css"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_search_html">
    <iframe id="head_search" src="head_search.html" frameborder="0"></iframe>
</div>
<div class="product_list container" v-cloak>
    <div class="bread"><a target="_blank" >首页</a><i class="icon_right"></i><a target="_blank" >{{val}}</a></div>
    <div class="type_list">
        <!--<div class="box">-->
            <!--<div class="type">零部件：</div>-->
            <!--<ul class="clearfix">-->
                <!--<li class="active">发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
                <!--<li>发动机总成</li>-->
            <!--</ul>-->
            <!--<div class="button_box">-->
                <!--<div class="hide">隐藏</div>-->
            <!--</div>-->

        <!--</div>-->
        <div class="box">
            <div class="type">品牌：</div>
            <ul class="clearfix">
                <li v-for="(item,index) in brandList" :id="item.id">{{item.name}}</li>
            </ul>
            <div class="button_box">
                <!--<div>更多</div>-->
                <div>多选</div>
            </div>
        </div>
    </div>
    <div class="filter">
        <ul class="clearfix">
            <!--<li>所有地区</li>-->
            <!--<li>全部</li>-->
            <li ><i class="icon_checkbox cur-p js-sort" data-name="crt_time" data-isasc="0"></i>默认排序</li>
            <li class="cur-p js-sort" data-name="price" data-isasc="0">价格<span class="icon-sty"></span></li>
            <li class="cur-p js-sort" data-name="grade" data-isasc="0">评分<span class="icon-sty"></span></li>
            <li class="cur-p js-sort" data-name="volume" data-isasc="0">销量<span class="icon-sty"></span></li>
        </ul>
    </div>
    <div class="content clearfix">
        <table>
            <tr v-for="item in list">
                <td><img class="pic" v-for="(it,index) in item.picUrl" :src="imgBaseUrl + it" v-if="index == 0" @click="goDetail(item.id)" alt=""></td>
                <td>
                    <div class="name cur-p" @click="goDetail(item.id)">{{item.name}}</div>
                    <div class="info" @click="goDetail(item.id)">品牌：{{item.originName}}</div>
                    <div class="info" @click="goDetail(item.id)">型号：{{item.origin}}</div>

                    <!--<div class="num">成交量：<b>20</b>件</div>-->
                </td>
                <td>
                    <div class="price">¥{{item.price}}</div>
                </td>
                <td>
                    <div class="company" @click="goStore(item.storeId)">{{item.storeName}}</div>
                    <div class="adress" @click="goStore(item.storeId)">{{item.address}}</div>
                    <i class="icon_store cur-p" @click="goStore(item.storeId)"></i>
                    <div class="score">
                        <!--<div class="star">-->
                            <!--<i style="width: 50%"></i>-->
                        <!--</div>-->
                    </div>
                </td>
                <td>
                    <a target="_blank" :href="'http://wpa.qq.com/msgrd?v=3&uin='+item.qq+'&site=qq&menu=yes'">
                        <img src="../img/QQ.png" class="qq-box1" align="absmiddle">
                    </a>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="test1"></div>
                </td>
            </tr>
        </table>
        <div class="store_leftbox fr" style="margin-top: 20px;">
            <div class="advice">
                <ul>
                    <li v-for="item in advertise" @click="goDetail(item.id)">
                        <img v-for="(it,index) in item.picUrl" :src="imgBaseUrl + it" v-if="index == 0" alt="">
                        <div class="price">¥{{item.price}}</div>
                        <p>{{item.name}}</p>
                        <label>广告</label>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank"  class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank"  class="go-shopcard">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>
                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank"  class="icon_edit_white"></a>
        <a target="_blank"  class="icon_top_white mt10"></a>
    </div>
</div>
<script src="../js/config.js"></script>
<script>

    var name = getUrlParam("name") || '';

    var limit = 10;
    var offset = 1;
    var type = getUrlParam("type") || '';
    var brand = '';
    var sort = 'crt_time';
    var isAsc = false;
    var originId = '';

    console.log(name)
    var app = new Vue({
        el: '.product_list',
        data: {
            val:name?name:type,
            imgBaseUrl: imgBaseUrl,
            list:"",
            brandList:null,
            faceValue: '',
            brandlist:[],
            total:'',
            advertise:'',
        },
        beforeCreate: function () {
            var that = this;
            get_ajax("/sys/banner/getBanners", {}, function (data) {

            })

            //            获取全部品牌分页
            get_ajax("/sys/origin/getAllNewPage", {limit: 12, offset: 1}, function (data) {
                that.brandList = data
                console.log(that.brandList);
            })
            get_ajax("/sys/storeCommodity/getAdvertisement", {limit:4}, function (data) {
                data.forEach(function (item) {
                    item.picUrl = item.picUrl.split(",");
                })
                that.advertise = data;
            });
        },
        updated: function () {
        },
        mounted:function(){
            this.getList();
        },

        methods:{
            getList:function () {
                var that = this;
                get_ajaxPage("/sys/storeCommodity/getPage", {limit: limit, offset: offset,originId:originId,type:type,name:name,sort:sort,isAsc:isAsc}, function (data) {
                    data.data.forEach(function (item) {
                        item.picUrl = item.picUrl.split(",");
                    })
                    that.list = data.data;
                    that.total = data.count;
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                            ,count: app.total //数据总数，从服务端得到
                            ,limit:limit
                            ,jump: function(obj, first){
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                //首次不执行
                                if(!first){
                                    get_ajaxPage("/sys/storeCommodity/getPage", {limit: limit,originId:originId, offset: obj.curr,type:type,name:name,sort:sort,isAsc:isAsc}, function (data) {
                                        data.data.forEach(function (item) {
                                            item.picUrl = item.picUrl.split(",");
                                        })
                                        that.list = data.data;
                                        console.log(that.list);
                                        that.total = data.count;
                                    })
                                }
                            }
                        });
                    });
                })
            },
            goStore:function (e) {
                location.href = "store.html?storeid="+e;
            },
            goDetail:function (e) {
                location.href = "product_detail.html?productid="+e;
            },

        }
    })





    $("body").on("click",".product_list .type_list ul li",function () {
        originId = '';
        var id = $(this).attr("id");
        if(!$(this).hasClass("active")){
            $(this).addClass("active");
            app.brandlist.push(id)
        }else {
            $(this).removeClass("active");
            app.brandlist.splice(id,"");
        }
        $(document).find('.product_list .type_list ul li').each(function(){
            if($(this).hasClass('active')){
                originId +=$(this).attr('id')+',';
            }
        })
        originId = originId.slice(0,originId.length-1);
        app.getList();
    })
    $(document).on('click','.js-sort',function(){
        $(this).siblings('.js-sort').find('.icon-sty').removeClass('icon-up icon-down');
        sort = $(this).attr('data-name');
        if($(this).attr('data-isasc') == 0){
            $(this).attr('data-isasc',1);
            isAsc = false;
            $(this).find('.icon-sty').addClass('icon-up').removeClass('icon-down');
        }else{
            $(this).attr('data-isasc',0);
            isAsc = true;
            $(this).find('.icon-sty').removeClass('icon-up').addClass('icon-down');
        }

        sort=='crt_time'?isAsc = false:$('.icon_checkbox').removeClass('active')
        if(sort=='crt_time'){
            isAsc = false;
        }else{
            $('.icon_checkbox').removeClass('active')
        }

        if($('.icon_checkbox').hasClass('active') || sort!='crt_time'){
            app.getList();
        }
    })
</script>
</body>
</html>